<template>
	<view class="form">
		<uv-form labelPosition="top" labelWidth="90px" errorType="toast" ref="form" :model="job" :rules="rules">
			<uv-form-item label="职位名称" prop="positionName" required borderBottom>
				<navigator url="/pages/common/position">
					<uv-input v-model="positionName" disabled placeholder="请选择职位名称"></uv-input>
				</navigator>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="薪资范围" prop="salary" required borderBottom>
				<picker :range="salaeyList" @change="changeSalary">
					<uv-input v-model="job.salary" disabled placeholder="请选择薪资范围"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="经验要求" prop="experience" required borderBottom>
				<picker :range="experienceList" @change="changeExperience">
					<uv-input v-model="job.experience" disabled placeholder="请选择经验要求"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="学历要求" prop="education" required borderBottom>
				<picker :range="educationList" @change="changeEducation">
					<uv-input v-model="job.education" disabled placeholder="请选择学历要求"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="岗位职责" borderBottom>
				<uv-input
					v-model="job.duty"
					disabled
					placeholder="请输入岗位职责"
					@click.native="toPage('duty')"
				></uv-input>
				<template v-slot:right>
					<uv-icon name="edit-pen" size="24"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="岗位要求" borderBottom>
				<uv-input
					v-model="job.require"
					disabled
					placeholder="请输入岗位要求"
					@click.native="toPage('require')"
				></uv-input>
				<template v-slot:right>
					<uv-icon name="edit-pen" size="24"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="招聘状态" borderBottom>
				<uv-radio-group v-model="job.enableStatus" placement="row" :customStyle="{ marginTop: '8px' }">
					<uv-radio
						:name="1"
						label="招聘中"
						activeColor="#12ae85"
						:customStyle="{ marginRight: '10px' }"
					></uv-radio>
					<uv-radio
						:name="0"
						label="已结束"
						activeColor="#12ae85"
						:customStyle="{ marginRight: '10px' }"
					></uv-radio>
				</uv-radio-group>
			</uv-form-item>
		</uv-form>

		<view class="confirm button" @click="handleSubmit"><button>保存</button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { createJob, getJobDetail, updateJob } from '@/apis/job/index.js';

export default {
	data() {
		return {
			salaeyList: ['面议', '1-3K', '3-5K', '5-8K', '8-12K', '12-15K', '15-20K', '20K以上'],
			experienceList: ['不限', '1年以内', '1-3年', '3-5年', '5-10年', '10年以上'],
			educationList: ['不限', '高中', '大专', '本科', '硕士', '博士'],
			positionName: '', // 职位名称
			jobId: null,
			job: {
				positionId: null, // 职位
				salary: '', // 薪资
				experience: '', // 经验
				education: '', // 学历
				duty: '', // 岗位职责
				require: '', // 岗位要求
				enableStatus: 1 // 状态
			},
			rules: {
				salary: { required: true, trigger: 'chang', message: '请选择薪资范围' },
				experience: { required: true, trigger: 'chang', message: '请选择经验要求' },
				education: { required: true, trigger: 'chang', message: '请选择学历要求' },
				positionName: [
					{
						required: true,
						trigger: 'chang',
						validator: () => {
							return !!this.positionName;
						},
						message: '请选择职位名称'
					}
				]
			}
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onReady() {
		this.$refs['form'].setRules(this.rules);
	},
	onLoad(option) {
		if (option.id) {
			this.jobId = option.id;
			this.initData(option.id);
		}
	},
	mounted() {
		// 监听页面传递的数据
		uni.$on('describe:value', value => {
			if (value.title === '岗位职责') {
				this.job.duty = value.content;
			} else {
				this.job.require = value.content;
			}
		});
		uni.$on('position:select', value => {
			this.job.positionId = value.id;
			this.positionName = value.name;
		});
	},
	onUnload() {
		// 移除监听事件
		uni.$off('describe:value');
		uni.$off('position:select');
	},
	methods: {
		// 初始化数据
		async initData(id) {
			const res = await getJobDetail(id);
			const { position, ...info } = res.data;
			this.job = info;
			this.job.positionId = position.id;
			this.positionName = position.name;
		},
		changeSalary(e) {
			this.job.salary = this.salaeyList[e.target.value];
		},
		changeExperience(e) {
			this.job.experience = this.experienceList[e.target.value];
		},
		changeEducation(e) {
			this.job.education = this.educationList[e.target.value];
		},
		// 页面跳转
		toPage(value) {
			const info = { title: '岗位职责', desc: '详细清晰的职位描述，能获得更多关注', value: this.job.duty };
			if (value === 'require') {
				info.title = '岗位要求';
				info.desc = '简洁概括所需技能和条件，吸引合适的候选人';
				info.value = this.job.require;
			}
			uni.navigateTo({
				url: '/pages/common/describe?info=' + encodeURIComponent(JSON.stringify(info))
			});
		},
		// 提交
		handleSubmit() {
			this.$refs['form']
				.validate()
				.then(async () => {
					const { userInfo, job } = this;

					let res;
					let message;
					const formData = { ...job, companyId: userInfo.companyId };

					if (this.jobId !== null) {
						res = await updateJob(formData);
						message = '更新成功';
					} else {
						res = await createJob(formData);
						message = '保存成功';
					}

					if (res.code === 200) {
						uni.showToast({ icon: 'success', title: message });
						const time = setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				})
				.catch(error => {});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.form .uv-form-item ::v-deep .uv-form-item__body {
	padding: 30rpx 0;
}

.form .uv-form-item ::v-deep .uv-input__content__prefix-icon {
	margin-right: 0px;
}

.form .uv-form-item ::v-deep .uv-input__content__field-wrapper__field {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>

<style lang="scss" scoped>
.form {
	position: relative;
	padding: 30rpx;
	.confirm {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		button {
			height: 40px;
			line-height: 40px;
			padding: 0 12px;
			border-radius: 10rpx;
			color: #fff;
			background-color: $main-color;
		}
	}
}
</style>
